<template>
  <el-form label-width="80px" size="mini">
    <el-form-item :label="messages.list_type">
      <el-switch active-value="white"
                 v-model="type"
                 inactive-value="black"
                 :active-text="messages.white_list"
                 :inactive-text="messages.black_list"
                 @change="save"></el-switch>
      <div class="help">{{ type === 'white' ? messages.list_tip_white : messages.list_tip_black }}</div>
    </el-form-item>
    <el-form-item :label="messages.list_content">
      <el-input v-model="content" type="textarea" rows="10" @blur="save"></el-input>
      <div class="help">{{ type === 'white' ? messages.list_tip_content_pac : messages.list_tip_content_bypass }}</div>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {computed, onMounted, reactive, ref, toRaw} from "vue";
import {messages} from "../uses/useI18nMessage.js";
import {bStorage, bProxy} from '../api'

const TYPE_KEY = 'special-type';
const LIST_KEY = 'special-list';
const type = ref('black');
const list = reactive({
  black: [],
  white: [],
});
const content = computed({
  get() {
    return list[type.value].join('\n');
  },
  set(value) {
    list[type.value] = value.split(/[\r\n]/);
  }
});
const save = async () => {
  await bStorage.set(TYPE_KEY, type.value);
  await bStorage.set(LIST_KEY, toRaw(list));
  await bProxy.initList();
  if (await bProxy.get()) {
    await bProxy.enable();
  }
}

onMounted(async () => {
  type.value = (await bStorage.get(TYPE_KEY)) || 'black';
  Object.assign(list, (await bStorage.get(LIST_KEY)) || {
    black: [],
    white: [],
  })
})
</script>

<style scoped>

</style>
